<template>
  <div class="window">
      <!--首页-->
      <router-link :to="{path: '/home'}">
        <div>
          <img src="../../../assets/common/shouyehou.png" alt="" class="img1">
          <img src="../../../assets/common/home.png" alt="" class="imgs1">
          <p>首页</p>
        </div>
      </router-link>
      <!--分类-->
      <router-link :to="{name: 'classif/tjian'}">
        <div>
          <img src="../../../assets/common/fenleihou.png" alt="" class="img1">
          <img src="../../../assets/common/classify.png" alt="" class="imgs1">
          <p>分类</p>
        </div>
      </router-link>
      <!--断货王-->
      <router-link :to="{name: 'shortProduct'}">
        <img src="../../../assets/common/duanhuo.png" alt="" id="imgs3">
      </router-link>
      <!--购物车-->
      <router-link :to="{name: 'shopCar'}">
        <div>
          <img src="../../../assets/common/gouwuchehou.png" alt="" class="img1 gou">
          <img src="../../../assets/common/buyCar.png" alt="" class="imgs1">
          <p>购物车</p>
        </div>
      </router-link>
      <!--个人中心-->
      <router-link :to="{name: 'geren'}">
        <div>
          <img src="../../../assets/common/gerenhou.png" alt="" class="img1 geren">
          <img src="../../../assets/common/personCenter.png" alt="" class="imgs1">
          <p class="oson">个人中心</p>
        </div>
      </router-link>
  </div>
</template>
<script>
  export default {
    data () {
      return {

      }
    },

  }
</script>
<style scoped>

  .window {
    width: 100%;
    height: 5rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    padding-top: 1rem;
    font-size: 1rem ;
    /*text-align: center;*/
  }
  .oson {
    position: absolute;
    right: 0.7rem;
  }
  .img1,
  .imgs1 {
    width: 2rem;
    height: 2rem;
  }
  .img1 {
    position: absolute;
    display: none;
  }
  .gou {
    /*right: 9.72rem;*/
  }
  #imgs3 {
    width: 6rem;
    height: 3rem;
  }
  a {
    color: #666666;
  }
  .router-link-active {
    color: red;
  }
  .router-link-active .img1 {
    display: block;
  }
</style>
